<script lang="ts">
	import ProductTip from '../product-tip/product-tip.svelte';
	/*
    使用钩子获取dom，设置好父元素的布局后，再显示子元素
  */

	import Divider from '$components/basic/divider/divider.svelte';
	import Button from '@smui/button';
	import { Picture } from '../../basic';
	import { Favourite } from '../product-tip';
	import { Full } from '$components/basic/full';
	import { getValue } from '$utils/get';
	import { ITEM_TYPE_ENUM } from './helper';
	import { MaskerLayer } from '../masker-layer';
	import { goto } from '$utils/intercept';
	import { useCartStore } from '@/store/modules/cart';
	import { createMessage, type MsgOptions } from '$components/basic/message';

	export let detail: Partial<Product.ProductDetail> = { id: 0 };
	export let style: string = '';
	export let showTip = true;

	const isCouldAddToCart = () => {
		return detail.mask === 1;
	};

	async function toDetail() {
		// if (isCouldAddToCart())
		await goto('/detail/' + detail.id);
	}

	const createAddToCartAnimation = (e) => {
		const { width: screenX, height: screenY } = document.body.getBoundingClientRect();
		const { clientX: x, clientY: y } = e as MouseEvent;
		const wrapDom = document.createElement('div');
		const dom = document.createElement('div');
		wrapDom.classList.add('cart-add__wrap');
		wrapDom.style.left = `${(x / screenX) * 100}%`;
		wrapDom.style.top = `${(y / screenY) * 100}%`;
		dom.classList.add('cart-add__dot');
		dom.classList.add('material-symbols-outlined');
		dom.innerText = 'shopping_bag';
		dom.style.setProperty('--endY', `${screenY - y}px`);
		wrapDom.appendChild(dom);
		document.body.appendChild(wrapDom);
	};

	async function toCart(e: Event) {
		e.preventDefault();
		e.stopPropagation();
		createAddToCartAnimation(e);

		let cartStore = useCartStore();
		const result = await cartStore.addCartItem({ ...detail, num: detail.moq } as Product.Detail);
		const messageOptions = result
			? { type: 'success', message: 'Success added to cart', duration: 2000 }
			: { type: 'warning', message: 'already exists', duration: 2000 };

		createMessage(messageOptions as MsgOptions);
	}

	const maskTextMap = {
		2: 'Closed',
		3: 'Sold Out'
	};
</script>

<button
	on:click={toDetail}
	{style}
	class="product reset-button cursor-pointer w-full h-full flex flex-col items-center border border-solid border-color-transparent box-border justify-start p-14px relative product hover:shadow-2xl hover:shadow-bluegray"
>
	{#if showTip}
		<ProductTip content={detail.itemType} date={detail.date} />
	{/if}

	<Favourite />
	<Picture src={detail.thumb} alt="macnn product" class="relative w-full aspect-ratio-1/1">
		{#if detail.mask && detail.mask !== 1}
			<MaskerLayer text={maskTextMap[Number(detail.mask)]} />
		{/if}
	</Picture>

	<div
		class="title mt-1 font-bold text-sm w-full font-size-16px text-ellipsis max-h-38px overflow-hidden"
	>
		{getValue(detail, 'title', '--no title --')}
	</div>
	<Divider direction="horizontal" style="--mdc-theme-primary: #9ca3af" />
	<div class="subTitle flex justify-between w-full font-size-14px line-height-20px">
		<span
			>{(() => {
				const result = getValue(detail, 'price', '-.--');
				if (isNaN(Number(result))) return result;
				return '$ ' + result;
			})()}</span
		>
		<span>{getValue(detail, 'code', '--')}</span>
	</div>
	{#if detail.itemType !== ITEM_TYPE_ENUM.CLOSE_OUT && showTip}
		<Button
			class="mt-1 h-36px text-white! w-full"
			style={detail.itemType === ITEM_TYPE_ENUM.CUSTOMER
				? 'background-color: #6b21a8'
				: 'background-color: var(--mdc-theme-primary)'}
			on:click={toCart}
		>
			<Full><div class="material-icons w-30px font-size-20px">shopping_cart</div></Full>
			<Divider direction="vertical" style="--mdc-theme-primary: white" />
			<span class="w-full text-center">Add Cart</span>
		</Button>
	{/if}
</button>

<style lang="scss">
	.product {
		color: rgb(51, 51, 51);
		transition: all 0.3s ease-in-out;
	}

	:global(.product:hover #favourite) {
		opacity: 1;
	}
</style>
